<template>
	<view>
		<van-skeleton title avatar row="10" :loading="loading">
			<van-cell-group>
				<van-cell clickable size="large">
					<view slot="title">
						<van-row>
							<van-col span="6" offset="1">
								<open-data type="userAvatarUrl" />
							</van-col>
							<van-col span="16" offset="1">
								<open-data type="userNickName" lang="zh_CN" class="text" />
							</van-col>
						</van-row>
					</view>
				</van-cell>
			</van-cell-group>
			<van-cell-group>
				<!-- 填写学校 -->
				<van-field :value="school" label="学校" required @click-icon="searchSchool" @blur="checkSchool"
					icon="search" right-icon-class="search" placeholder="请输入学校" @change="changeSchool"
					:error="schoolNull" />
				<!-- 搜索学校 -->
				<van-popup :show="showSchoolPop" @close="closeSchoolPop" position="bottom" round
					custom-style="height: 50%;">
					<van-picker show-toolbar title="选择您的学校" :columns="schools" @cancel="closeSchoolPop"
						@confirm="confirmSchool" :loading="loadingSchool" />
				</van-popup>
				<!-- 输入学院 -->
				<van-field :value="college" label="学院" v-show="!isSDU" required placeholder="请输入学院"
					@change="changeCollege" :error="collegeNull" @blur="checkCollege">
				</van-field>
				<!-- 输入专业 -->
				<van-field :value="major" label="专业" v-show="!isSDU" required placeholder="请输入专业" @change="changeMajor"
					:error="majorNull" @blur="checkMajor">
				</van-field>
				<!-- SDUer输入学院 -->
				<van-field :value="college" label="学院" v-show="isSDU" required placeholder="请输入学院"
					@click-icon="searchCollege" @change="changeSDUCollege" icon="search" right-icon-class="search"
					:error="collegeNull" @blur="checkCollege">
				</van-field>
				<!-- SDUer搜索学院 -->
				<van-popup :show="showCollegePop" @close="closeCollegePop" position="bottom" round
					custom-style="height: 50%;">
					<van-picker show-toolbar title="选择您的学院" :columns="colleges" @cancel="closeCollegePop"
						@confirm="confirmCollege" :loading="loadingCollege" />
				</van-popup>
				<!-- SDUer输入专业 -->
				<van-field :value="major" label="专业" v-show="isSDU" required @click-icon="searchMajor"
					placeholder="请输入专业" @change="changeSDUMajor" icon="search" right-icon-class="search"
					:error="majorNull" @blur="checkMajor">
				</van-field>
				<!-- SDUer搜索专业 -->
				<van-popup :show="showMajorPop" @close="closeMajorPop" position="bottom" round
					custom-style="height: 50%;">
					<van-picker show-toolbar title="选择您的专业" :columns="majors" @cancel="closeMajorPop"
						@confirm="confirmMajor" :loading="loadingMajor" />
				</van-popup>
				<!-- 选择年级 -->
				<van-cell is-link @click="popGradePicker">
					<view slot="title">
						<van-row>
							<van-col :span="9">
								<view>年级</view>
							</van-col>
							<van-col :span="15">
								<view>{{grade}}</view>
							</van-col>
						</van-row>
					</view>
				</van-cell>
				<van-popup :show="showGrade" @close="closeGrade" position="bottom" round custom-style="height: 50%;">
					<van-picker show-toolbar title="选择您的年级" :columns="grades" @cancel="closeGrade"
						@confirm="confirmGrade" />
				</van-popup>
				<!-- 选择专业 -->
				<van-cell is-link @click="popClassPicker">
					<view slot="title">
						<van-row>
							<van-col :span="9">
								<view>班级</view>
							</van-col>
							<van-col :span="15">
								<view>{{banji}}</view>
							</van-col>
						</van-row>
					</view>
				</van-cell>
				<van-popup :show="showClass" @close="closeClass" position="bottom" round custom-style="height: 50%;">
					<van-picker show-toolbar title="选择您的班级" :columns="classes" @cancel="closeClass"
						@confirm="confirmClass" />
				</van-popup>
			</van-cell-group>
			<div class="editBtn">
				<van-button type="primary" block round color="#006600" :disabled="!infoCompleted" custom-class="submit"
					@click="updateInfo">提交</van-button>
			</div>
			<van-notify id="van-notify" />
		</van-skeleton>
	</view>
</template>

<script>
	import Notify from '../../wxcomponents/vant/dist/notify/notify';
	export default {
		data() {
			return {
				schools: [],
				grades: [1, 2, 3, 4, 5],
				classes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
				colleges: [],
				majors: [],
				school: "",
				college: "",
				major: "",
				grade: 1,
				banji: 1,
				isSDU: false,
				schoolNull: false,
				collegeNull: false,
				majorNull: false,
				showSchoolPop: false,
				loadingSchool: false,
				loadingCollege: false,
				showGrade: false,
				showClass: false,
				showCollegePop: false,
				showMajorPop: false,
				loadingMajor: false,
				infoCompleted: false,
				loading: true
			}
		},
		beforeCreate() {
			this.loading = true
		},
		onLoad() {
			let self = this
			uni.request({
				url: getApp().globalData.baseURL + "/user/getUser",
				data: {
					"openid": wx.getStorageSync('openid')
				},
				header: {
					"token": wx.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code === 1) {
						self.school = res.data.data.school
						self.grade = res.data.data.grade
						self.banji = res.data.data.banji
						self.major = res.data.data.major
						self.college = res.data.data.college
					}
				},
				fail: (err) => {
					Notify({
						type: 'danger',
						message: '获取个人信息失败,请检查您的网络连接'
					});
				}
			})
			this.checkNull()
		},
		mounted() {
			this.loading = false
		},
		methods: {
			checkNull() {
				if (this.school == "" || this.college == "" || this.major == "") {
					this.infoCompleted = false
				} else {
					this.infoCompleted = true
				}
			},
			// 提交
			updateInfo(e) {
				let self = this
				// 先查询此用户是否存在
				uni.request({
					url: getApp().globalData.baseURL + "/user/getUser",
					data: {
						"openid": wx.getStorageSync('openid')
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == -1) {
							self.addUser()
						} else {
							self.updateUserInfo()
						}
						uni.navigateBack()
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '获取用户信息失败'
						});
					}
				})
			},

			// 添加用户
			addUser() {
				let self = this
				uni.request({
					url: getApp().globalData.baseURL + "/user/addAUser",
					data: {
						"openid": wx.getStorageSync('openid'),
						"school": self.school,
						"college": self.college,
						"major": self.major,
						"grade": self.grade,
						"banji": self.banji
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							Notify({
								type: 'success',
								message: '添加信息成功'
							});
						} else {
							Notify({
								type: 'danger',
								message: '添加用户信息失败,请重试'
							});
						}
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '添加用户失败'
						});
					}
				})
			},
			// 更新用户
			updateUserInfo() {
				let self = this
				uni.request({
					url: getApp().globalData.baseURL + "/user/updateUser",
					data: {
						"openid": wx.getStorageSync('openid'),
						"school": self.school,
						"college": self.college,
						"major": self.major,
						"grade": self.grade,
						"banji": self.banji
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							Notify({
								type: 'success',
								message: '更新信息成功'
							});
						} else {
							Notify({
								type: 'danger',
								message: '更新用户信息失败,请重试'
							});
						}
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '修改用户信息失败'
						});
					}
				})
			},
			// 输入
			// 输入学校
			changeSchool(e) {
				this.school = e.detail
				if (this.school === "山东大学") {
					this.isSDU = true
				} else {
					this.isSDU = false
				}
				this.checkNull()
			},
			// 填写非山大学校的学院
			changeCollege(e) {
				this.college = e.detail
				this.checkSchool()
				this.checkNull()
			},
			// 填写专业
			changeMajor(e) {
				this.major = e.detail
				this.checkSchool()
				this.checkMajor()
				this.checkNull()
			},
			// 填写山大学院
			changeSDUCollege(e) {
				this.college = e.detail
				this.checkNull()
			},
			// 填写山大专业
			changeSDUMajor(e) {
				this.major = e.detail
				this.checkNull()
			},
			// 校验
			// 学校是否已填校验
			checkSchool(e) {
				if (this.school === "") {
					Notify({
						type: 'danger',
						message: '学校不能为空'
					});
					this.schoolNull = true
				} else {
					this.schoolNull = false
				}
			},
			// 学院是否已填写校验
			checkCollege(e) {
				if (this.college === "") {
					Notify({
						type: 'danger',
						message: '学院不能为空'
					});
					this.collegeNull = true
				} else {
					this.collegeNull = false
				}
			},
			// 专业是否已填写校验
			checkMajor(e) {
				if (this.major === "") {
					Notify({
						type: 'danger',
						message: '专业不能为空'
					});
					this.majorNull = true
				} else {
					this.majorNull = false
				}
			},
			// 搜索
			// 搜索学校,打开搜索学校弹出层
			searchSchool() {
				let self = this
				this.showSchoolPop = true
				this.loadingSchool = true
				uni.request({
					url: getApp().globalData.baseURL + "/OnInputQuery/querySchool",
					data: {
						"school": this.school
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						self.loadingSchool = false
						if (res.data.data == "山东大学") {
							self.schools = res.data.data
						} else {
							Notify({
								type: 'warning',
								message: '目前只支持搜索山东大学哦~'
							});
						}
					},
					fail: (err) => {
						self.loadingSchool = false
						Notify({
							type: 'danger',
							message: '加载失败'
						});
					}
				})
			},
			searchCollege() {
				let self = this
				this.showCollegePop = true
				this.loadingCollege = true
				uni.request({
					url: getApp().globalData.baseURL + "/OnInputQuery/queryCollege",
					data: {
						"school": self.school,
						"college": self.college
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						self.loadingCollege = false
						if (res.data.data != "") {
							self.colleges = res.data.data
						} else {
							Notify({
								type: 'warning',
								message: "没有数据"
							});
						}
					},
					fail: (err) => {
						self.loadingCollege = false
						Notify({
							type: 'danger',
							message: '加载失败'
						});
					}
				})
			},
			searchMajor() {
				let self = this
				this.showMajorPop = true
				this.loadingMajor = true
				uni.request({
					url: getApp().globalData.baseURL + "/OnInputQuery/queryMajor",
					data: {
						"school": self.school,
						"college": self.college,
						"major": self.major
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						self.loadingMajor = false
						if (res.data.data != "") {
							self.majors = res.data.data
						} else {
							Notify({
								type: 'warning',
								message: "没有数据"
							});
						}
					},
				})
			},
			// 弹出层
			// 关闭搜索学院弹出层
			closeCollegePop() {
				this.showCollegePop = false
			},
			// 关闭搜索学校弹出层
			closeSchoolPop() {
				this.showSchoolPop = false
			},
			// 关闭搜索专业弹出层
			closeMajorPop() {
				this.showMajorPop = false
			},
			// 打开选择年级弹出层
			popGradePicker(e) {
				this.showGrade = true
			},
			// 关闭选择年级弹出层
			closeGrade(e) {
				this.showGrade = false
			},
			//打开选择班级弹出层
			popClassPicker(e) {
				this.showClass = true
			},
			// 关闭选择班级弹出层
			closeClass(e) {
				this.showClass = false
			},
			// 在弹出层选择学校
			confirmSchool(e) {
				this.school = e.detail.value
				if (this.school === "山东大学") {
					this.isSDU = true
				}
				this.showSchoolPop = false
			},
			// 在弹出层选择学院
			confirmCollege(e) {
				this.college = e.detail.value
				this.showCollegePop = false
			},
			// 在弹出层选择专业
			confirmMajor(e) {
				this.major = e.detail.value
				this.showMajorPop = false
			},
			// 在弹出层选择年级
			confirmGrade(e) {
				this.grade = e.detail.value
				this.showGrade = false
			},
			// 在弹出层选择班级
			confirmClass(e) {
				this.banji = e.detail.value
				this.showClass = false
			}
		}
	}
</script>

<style scoped>
	.text {
		color: #808080;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.editBtn {
		margin-top: 280rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.submit {
		font-size: larger;
		font-weight: bold;

	}
</style>
